<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米商城</title>
    <!--引入iconfont资源-->
    <link rel="stylesheet" href="CSS/iconfont.css">
    <!--引入地址栏图标-->
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon">
    <!--引入index的样式-->
    <link rel="stylesheet" href="CSS/index.css">
    <!--引入初始化样式资源-->
    <link rel="stylesheet" href="CSS/base.css">

    <!--引入jQuery文件-->
    <script src="JS/jquery.js"></script>
    <!--引入method.js-->
    <script src="JS/method.js"></script>
    <!--引入JS文件-->
    <script src="JS/index.js"></script>
</head>
<body>
<div id="main">
    <!--顶部导航条开始-->
    <div class="top-bar">
        <div class="wrapper">
            <div class="left">
                <ul>
                    <li><a href="">小米商城</a></li>
                    <span>|</span>
                    <li><a href="">MIUI</a></li>
                    <span>|</span>
                    <li><a href="">loT</a></li>
                    <span>|</span>
                    <li><a href="">云服务</a></li>
                    <span>|</span>
                    <li><a href="">天星数科</a></li>
                    <span>|</span>
                    <li><a href="">有品</a></li>
                    <span>|</span>
                    <li><a href="">小爱开放平台</a></li>
                    <span>|</span>
                    <li><a href="">企业团购</a></li>
                    <span>|</span>
                    <li><a href="">资质证照</a></li>
                    <span>|</span>
                    <li><a href="">协议规则</a></li>
                    <span>|</span>
                    <li id="downloadapp"><a href="">下载app</a></li>
                    <span>|</span>
                    <li><a href="">智能生活</a></li>
                    <span>|</span>
                    <li><a href="">Select Location</a></li>
                </ul>
            </div>
            <!--下载APP：二维码-->
            <div id="download-erweima">
                <span class="triangle"><img src="images/triangle.svg" alt=""></span>
                <span class="erweima"><img src="images/download-erweima.png" alt=""></span>
                <p>小米商城APP</p>
            </div>
            <div class="right">
                <ul>
                    <li><a href="">登录</a></li><span>|</span>
                    <li><a href="">注册</a></li><span>|</span>
                    <li><a href="">消息通知</a></li>
                    <li id="cart">
                        <a href="">
                            <span class="iconfont icon-gouwuche orange"></span>
                            <span class="cart-text orange">&nbsp;&nbsp;购物车（0）</span>
                            <div id="hover-cart" >
                                <span class="text">购物车中还没有商品，赶紧选购吧！</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--顶部导航条结束-->

    <!--导航栏开始-->
    <nav>
        <div class="wrapper nav-topwrapper">
            <div id="logo">
                <a href="" class="iconfont icon-xiaomi"></a>
            </div>
            <div id="nav-list">
                <ul class="candown-list">
                    <li class="candown">小米手机</li>
                    <li class="candown">Redmi红米</li>
                    <li class="candown">电视</li>
                    <li class="candown">笔记本</li>
                    <li class="candown">家电</li>
                    <li class="candown">路由器</li>
                    <li class="candown">智能硬件</li>
                </ul>
                <span><a href="">服务</a></span>
                <span><a href="">社区</a></span>
            </div>

            <div id="search">
                <input id="search-in" type="text" placeholder="叉烧" />
                <div id="hot-words">

                </div>
                <div id="search-key" class="iconfont icon-sousuo"></div>
            </div>
        </div>
        <!--下拉栏-->
        <div class="nav-dropdown" id="nav-down">
            <div class="wrapper">
                <ul class="toolbox">
                    <li>
                        <a href="">
                            <img src="images/小米手机.webp" alt="">
                            <p>小米11 Pro</p>
                            <p class="tool-price">4499元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/小米手机.webp" alt="">
                            <p>小米11 Pro</p>
                            <p class="tool-price">4499元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/小米手机.webp" alt="">
                            <p>小米11 Pro</p>
                            <p class="tool-price">4499元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/小米手机.webp" alt="">
                            <p>小米11 Pro</p>
                            <p class="tool-price">4499元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/小米手机.webp" alt="">
                            <p>小米11 Pro</p>
                            <p class="tool-price">4499元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/小米手机.webp" alt="">
                            <p>小米11 Pro</p>
                            <p class="tool-price">4499元起</p>
                        </a>
                    </li>
                </ul>
                <ul class="toolbox">
                    <li>
                        <a href="">
                            <img src="images/Redmi.webp" alt="">
                            <p>K40 游戏增强版</p>
                            <p class="tool-price">1999元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/Redmi.webp" alt="">
                            <p>K40 游戏增强版</p>
                            <p class="tool-price">1999元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/Redmi.webp" alt="">
                            <p>K40 游戏增强版</p>
                            <p class="tool-price">1999元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/Redmi.webp" alt="">
                            <p>K40 游戏增强版</p>
                            <p class="tool-price">1999元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/Redmi.webp" alt="">
                            <p>K40 游戏增强版</p>
                            <p class="tool-price">1999元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/Redmi.webp" alt="">
                            <p>K40 游戏增强版</p>
                            <p class="tool-price">1999元起</p>
                        </a>
                    </li>
                </ul>
                <ul class="toolbox">
                    <li>
                        <a href="">
                            <img src="images/电视.webp" alt="">
                            <p>至尊版 55英寸</p>
                            <p class="tool-price">5999元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/电视.webp" alt="">
                            <p>至尊版 55英寸</p>
                            <p class="tool-price">5999元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/电视.webp" alt="">
                            <p>至尊版 55英寸</p>
                            <p class="tool-price">5999元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/电视.webp" alt="">
                            <p>至尊版 55英寸</p>
                            <p class="tool-price">5999元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/电视.webp" alt="">
                            <p>至尊版 55英寸</p>
                            <p class="tool-price">5999元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/电视.webp" alt="">
                            <p>至尊版 55英寸</p>
                            <p class="tool-price">5999元起</p>
                        </a>
                    </li>
                </ul>
                <ul class="toolbox">
                    <li>
                        <a href="">
                            <img src="images/笔记本1.webp" alt="">
                            <p>笔记本 Pro X 15</p>
                            <p class="tool-price">8499元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/笔记本1.webp" alt="">
                            <p>笔记本 Pro X 15</p>
                            <p class="tool-price">8499元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/笔记本1.webp" alt="">
                            <p>笔记本 Pro X 15</p>
                            <p class="tool-price">8499元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/笔记本1.webp" alt="">
                            <p>笔记本 Pro X 15</p>
                            <p class="tool-price">8499元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/笔记本1.webp" alt="">
                            <p>笔记本 Pro X 15</p>
                            <p class="tool-price">8499元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/笔记本1.webp" alt="">
                            <p>笔记本 Pro X 15</p>
                            <p class="tool-price">8499元起</p>
                        </a>
                    </li>
                </ul>
                <ul class="toolbox">
                    <li>
                        <a href="">
                            <img src="images/机器人.webp" alt="">
                            <p>米家扫地机器人1T</p>
                            <p class="tool-price">1699元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/机器人.webp" alt="">
                            <p>米家扫地机器人1T</p>
                            <p class="tool-price">1699元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/机器人.webp" alt="">
                            <p>米家扫地机器人1T</p>
                            <p class="tool-price">1699元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/机器人.webp" alt="">
                            <p>米家扫地机器人1T</p>
                            <p class="tool-price">1699元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/机器人.webp" alt="">
                            <p>米家扫地机器人1T</p>
                            <p class="tool-price">1699元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/机器人.webp" alt="">
                            <p>米家扫地机器人1T</p>
                            <p class="tool-price">1699元起</p>
                        </a>
                    </li>
                </ul>
                <ul class="toolbox">
                    <li>
                        <a href="">
                            <img src="images/路由器.webp" alt="">
                            <p>小米路由器AX9000</p>
                            <p class="tool-price">1299元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/路由器.webp" alt="">
                            <p>小米路由器AX9000</p>
                            <p class="tool-price">1299元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/路由器.webp" alt="">
                            <p>小米路由器AX9000</p>
                            <p class="tool-price">1299元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/路由器.webp" alt="">
                            <p>小米路由器AX9000</p>
                            <p class="tool-price">1299元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/路由器.webp" alt="">
                            <p>小米路由器AX9000</p>
                            <p class="tool-price">1299元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/路由器.webp" alt="">
                            <p>小米路由器AX9000</p>
                            <p class="tool-price">1299元起</p>
                        </a>
                    </li>
                </ul>
                <ul class="toolbox">
                    <li>
                        <a href="">
                            <img src="images/音箱.webp" alt="">
                            <p>Redmi小爱触屏音箱Pro8</p>
                            <p class="tool-price">499元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/音箱.webp" alt="">
                            <p>Redmi小爱触屏音箱Pro8</p>
                            <p class="tool-price">499元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/音箱.webp" alt="">
                            <p>Redmi小爱触屏音箱Pro8</p>
                            <p class="tool-price">499元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/音箱.webp" alt="">
                            <p>Redmi小爱触屏音箱Pro8</p>
                            <p class="tool-price">499元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/音箱.webp" alt="">
                            <p>Redmi小爱触屏音箱Pro8</p>
                            <p class="tool-price">499元起</p>
                        </a>
                    </li>
                    <span></span>
                    <li>
                        <a href="">
                            <img src="images/音箱.webp" alt="">
                            <p>Redmi小爱触屏音箱Pro8</p>
                            <p class="tool-price">499元起</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <!--搜索栏结束-->


    <!--右侧固定导航栏-->
    <div id="right-bar">
            <div>
                <div class="iconfont">&#xe633;</div>
                <p>手机APP</p>
            </div>
            <div>
                <div class="iconfont">&#xe63e;</div>
                <p>个人中心</p>
            </div>
            <div>
                <div class="iconfont">&#xe614;</div>
                <p>售后服务</p>
            </div>
            <div>
                <div class="iconfont">&#xe635;</div>
                <p>人工客服</p>
            </div>
            <div>
                <div class="iconfont">&#xe607;</div>
                <p>购物车</p>
            </div>
            <div id="return-top">
                <div class="iconfont">&#xe65b;</div>
                <p>返回顶部</p>
            </div>

        <div class="right-app">
            <a href=""><img src="images/download-erweima.png" alt=""></a>
            <p>扫码领取新<br>人百元礼包</p>
        </div>
    </div>
    <!--右侧固定导航栏结束-->

    <!--菜单栏、 轮播图开始-->
    <div class="home">
        <div class="wrapper">
            <!--左侧导航栏-->
            <div class="sidebar">
                <ul class="sidebar-ul">
                    <li class="sidebar-list"><a href="">手机 电话卡 <span class="iconfont">&#xe60e;</span></a></li>
                    <li class="sidebar-list"><a href="">电视 盒子 <span class="iconfont">&#xe60e;</span></a></li>
                    <li class="sidebar-list"><a href="">笔记本 显示器 <span class="iconfont">&#xe60e;</span></a></li>
                    <li class="sidebar-list"><a href="">家电 插线板 <span class="iconfont">&#xe60e;</span></a></li>
                    <li class="sidebar-list"><a href="">出行 穿戴 <span class="iconfont">&#xe60e;</span></a></li>
                    <li class="sidebar-list"><a href="">智能 路由器 <span class="iconfont">&#xe60e;</span></a></li>
                    <li class="sidebar-list"><a href="">电源 配件 <span class="iconfont">&#xe60e;</span></a></li>
                    <li class="sidebar-list"><a href="">健康 儿童 <span class="iconfont">&#xe60e;</span></a></li>
                    <li class="sidebar-list"><a href="">耳机 音箱 <span class="iconfont">&#xe60e;</span></a></li>
                    <li class="sidebar-list"><a href="">生活 箱包 <span class="iconfont">&#xe60e;</span></a></li>
                </ul>
                <div class="sidebar-children">
                    <!--手机 电话卡-->
                    <div class="play-none">
                        <div class="sidebar-box">
                            <ul>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--电视 盒子-->
                    <div class="play-none">
                        <div class="sidebar-box">
                            <ul>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--笔记本-->
                    <div class="play-none">
                        <div class="sidebar-box">
                            <ul>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--家电-->
                    <div class="play-none">
                        <div class="sidebar-box">
                            <ul>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--出行-->
                    <div class="play-none">
                        <div class="sidebar-box">
                            <ul>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--手机 电话卡-->
                    <div class="play-none">
                        <div class="sidebar-box">
                            <ul>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/小米10.webp" alt=""> 小米10</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--电视 盒子-->
                    <div class="play-none">
                        <div class="sidebar-box">
                            <ul>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/超大屏.webp" alt=""> 超大屏</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--笔记本-->
                    <div class="play-none">
                        <div class="sidebar-box">
                            <ul>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/笔记本.webp" alt=""> 笔记本</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--家电-->
                    <div class="play-none">
                        <div class="sidebar-box">
                            <ul>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/电烤箱.webp" alt=""> 电烤箱</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!--出行-->
                    <div class="play-none">
                        <div class="sidebar-box">
                            <ul>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                            </ul>
                            <ul>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                                <li>
                                    <a href=""><img src="images/手环.webp" alt=""> 手环</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!--左侧导航栏结束-->

            <!--轮播图开始-->
            <div class="slideshow">
                <ul class="picture">
                    <!--之前用index显示第一张图片，轮播的时候余影是第一张，而不是上一张
                    用block 就解决了这个问题-->
                    <li class="pic-item" style="display: block"><a href=""><img src="images/article1.jpg" alt=""></a></li>
                    <li class="pic-item"><a href=""><img src="images/article2.webp" alt=""></a></li>
                    <li class="pic-item"><a href=""><img src="images/article3.webp" alt=""></a></li>
                    <li class="pic-item"><a href=""><img src="images/article4.webp" alt=""></a></li>
                </ul>
                <!--右下角圆点-->
                <ul class="slide-dot">
                    <li class="dot active"></li>
                    <li class="dot"></li>
                    <li class="dot"></li>
                    <li class="dot"></li>
                </ul>
                <!--上一张点击按钮-->
                <div class="previous iconfont">&#xe636;</div>
                <!--下一张点击按钮-->
                <div class="next iconfont">&#xe634;</div>
            </div>
            <!--轮播图结束-->
        </div>
    </div>
    <!--菜单栏、 轮播图结束-->


    <!--轮播图下的选购栏开始-->
    <div id="choose-bar" class="wrapper">
        <div class="service">
            <ul>
                <li>
                    <span class="iconfont">&#xe61a;</span>
                    <p>小米秒杀</p>
                </li>
                <li>
                    <span class="iconfont">&#xe60f;</span>
                    <p>企业团购</p>
                </li>
                <li>
                    <span class="iconfont">&#xe61f;</span>
                    <p>F码通道</p>
                </li>
                <li>
                    <span class="iconfont">&#xe6ca;</span>
                    <p>米粉卡</p>
                </li>
                <li>
                    <span class="iconfont">&#xe61b;</span>
                    <p>以旧换新</p>
                </li>
                <li>
                    <span class="iconfont">&#xe6d2;</span>
                    <p>花费充值</p>
                </li>
            </ul>
        </div>
        <div class="choose-pic">
            <img src="images/Redmi%209A.jpg" alt="">
        </div>
        <div class="choose-pic">
            <img src="images/小米11.jpg" alt="">
        </div>
        <div class="choose-pic">
            <img src="images/降噪耳机.png" alt="">
        </div>
    </div>
    <!--轮播图下的选购栏结束-->

</div>

<div class="exhibition">
    <!--秒杀栏-->
    <div id="second-kill" class="wrapper">
        <h2>小米秒杀</h2>

        <div class="kill-bar">
            <!--倒计时栏-->
            <div id="second">
                <h3>00:00 场</h3>
                <p class="iconfont">&#xe60d;</p>
                <p class="end">本场已结束</p>
                <div id="count-down">
                    <span class="hour">00</span> :
                    <span class="minute">00</span> :
                    <span class="sec">00</span>
                </div>
            </div>

            <!--商品展示栏-->
            <div id="show-good">
                <ul class="show-good-ul" id="show-ul">
                    <li>
                        <img src="images/秒杀.webp" alt="">
                        <p class="topic">智能遥控车 黄绿色</p>
                        <p class="synopsis">爆款车型正版授权</p>
                        <p class="rate">189元 <span>199元</span></p>
                    </li>
                    <li>
                        <img src="images/秒杀.webp" alt="">
                        <p class="topic">智能遥控车 黄绿色</p>
                        <p class="synopsis">爆款车型正版授权</p>
                        <p class="rate">189元 <span>199元</span></p>
                    </li>
                    <li>
                        <img src="images/秒杀.webp" alt="">
                        <p class="topic">智能遥控车 黄绿色</p>
                        <p class="synopsis">爆款车型正版授权</p>
                        <p class="rate">189元 <span>199元</span></p>
                    </li>
                    <li>
                        <img src="images/秒杀.webp" alt="">
                        <p class="topic">智能遥控车 黄绿色</p>
                        <p class="synopsis">爆款车型正版授权</p>
                        <p class="rate">189元 <span>199元</span></p>
                    </li>
                    <li>
                        <img src="images/鼠标.webp" alt="">
                        <p class="topic">智能遥控车 黄绿色</p>
                        <p class="synopsis">爆款车型正版授权</p>
                        <p class="rate">189元 <span>199元</span></p>
                    </li>
                    <li>
                        <img src="images/鼠标.webp" alt="">
                        <p class="topic">智能遥控车 黄绿色</p>
                        <p class="synopsis">爆款车型正版授权</p>
                        <p class="rate">189元 <span>199元</span></p>
                    </li>
                    <li>
                        <img src="images/鼠标.webp" alt="">
                        <p class="topic">智能遥控车 黄绿色</p>
                        <p class="synopsis">爆款车型正版授权</p>
                        <p class="rate">189元 <span>199元</span></p>
                    </li>
                    <li>
                        <img src="images/鼠标.webp" alt="">
                        <p class="topic">智能遥控车 黄绿色</p>
                        <p class="synopsis">爆款车型正版授权</p>
                        <p class="rate">189元 <span>199元</span></p>
                    </li>
                    <li>
                        <img src="images/口罩.webp" alt="">
                        <p class="topic">智能遥控车 黄绿色</p>
                        <p class="synopsis">爆款车型正版授权</p>
                        <p class="rate">189元 <span>199元</span></p>
                    </li>
                    <li>
                        <img src="images/口罩.webp" alt="">
                        <p class="topic">智能遥控车 黄绿色</p>
                        <p class="synopsis">爆款车型正版授权</p>
                        <p class="rate">189元 <span>199元</span></p>
                    </li>
                    <li>
                        <img src="images/口罩.webp" alt="">
                        <p class="topic">智能遥控车 黄绿色</p>
                        <p class="synopsis">爆款车型正版授权</p>
                        <p class="rate">189元 <span>199元</span></p>
                    </li>
                    <li>
                        <img src="images/口罩.webp" alt="">
                        <p class="topic">智能遥控车 黄绿色</p>
                        <p class="synopsis">爆款车型正版授权</p>
                        <p class="rate">189元 <span>199元</span></p>
                    </li>
                    <li>
                        <img src="images/tumb.webp" alt="">
                        <p class="topic">智能遥控车 黄绿色</p>
                        <p class="synopsis">爆款车型正版授权</p>
                        <p class="rate">189元 <span>199元</span></p>
                    </li>
                </ul>
            </div>

            <!--向左向右按钮-->
            <div class="direction">
                <span class="it direc-left iconfont">&#xe636;</span>
                <span class="direc-right iconfont">&#xe634;</span>
            </div>
        </div>
        <div class="banner">
            <img src="images/note9.webp" alt="">
        </div>
    </div>
    <!--秒杀栏结束-->

    <!--商品栏开始-->
    <div class="general">
        <div class="wrapper">

            <h2>手机
                <span class="column iconfont long-more">&#xe658;</span><span class="column long-more">查看更多</span>
            </h2>
            <div class="product the-long">
                <div class="long-banner">
                    <img src="images/MIX.webp" alt="">
                </div>
                <ul class="long-ul">
                    <li class="float">
                        <img src="images/音箱8英寸.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float">
                        <img src="images/音箱8英寸.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float">
                        <img src="images/音箱8英寸.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float right-zero">
                        <img src="images/音箱8英寸.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float">
                        <img src="images/音箱8英寸.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float">
                        <img src="images/音箱8英寸.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float">
                        <img src="images/音箱8英寸.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float right-zero">
                        <img src="images/音箱8英寸.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                </ul>
            </div>
            <div class="banner">
                <img src="images/积木.webp" alt="">
            </div>

            <h2>家电
                <span class="column">电视影音</span><span class="column">热门</span>
            </h2>
            <div class="product">
                <ul>
                    <li class="float be-background"></li>
                    <li class="float">
                        <img src="images/全面屏65.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float">
                        <img src="images/全面屏65.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float">
                        <img src="images/全面屏65.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float right-zero">
                        <img src="images/全面屏65.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float be-background"></li>
                    <li class="float">
                        <img src="images/全面屏65.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float">
                        <img src="images/全面屏65.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float">
                        <img src="images/全面屏65.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float right-zero  min-li">
                        <div class="f-top">
                            <div class="f-theme">
                                <p>小米米家空气净化器 2S</p>
                                <span>559元</span>
                            </div>
                            <div class="f-img">
                                <img class="f-img1" src="images/净化器.jpg" alt="">
                            </div>
                        </div>
                    </li>
                    <li class="float f-last right-zero  min-li">
                        <div class="f-bottom">
                            <p>浏览更多 <br><span>热门</span></p>
                            <span class="iconfont">&#xe602;</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="banner">
                <img src="images/智能门锁.webp" alt="">
            </div>

            <h2>智能
                <span class="column">电视影音</span><span class="column">热门</span>
            </h2>
            <div class="product">
                <ul>
                    <li class="float be-background"></li>
                    <li class="float">
                        <img src="images/音箱8英寸.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float">
                        <img src="images/音箱8英寸.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float">
                        <img src="images/音箱8英寸.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float right-zero">
                        <img src="images/音箱8英寸.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float be-background"></li>
                    <li class="float">
                        <img src="images/音箱8英寸.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float">
                        <img src="images/音箱8英寸.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float">
                        <img src="images/音箱8英寸.webp" alt="">
                        <p class="f-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                        <p class="f-price">1699元起 <span>1899元</span></p>
                    </li>
                    <li class="float right-zero  min-li">
                        <div class="f-top">
                            <div class="f-theme">
                                <p>小米米家空气净化器 2S</p>
                                <span>559元</span>
                            </div>
                            <div class="f-img">
                                <img class="f-img1" src="images/净化器.jpg" alt="">
                            </div>
                        </div>
                    </li>
                    <li class="float f-last right-zero min-li">
                        <div class="f-bottom">
                            <p>浏览更多 <br><span>热门</span></p>
                            <span class="iconfont">&#xe602;</span>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="banner">
                <img src="images/积木.webp" alt="">
            </div>


            <!--部分播放栏-->
            <h2>视频
                <span class="column iconfont long-more">&#xe658;</span><span class="column long-more">查看更多</span>
            </h2>
            <div class="product video">
                <ul>
                    <li class="float">
                        <div class="v-img">
                            <img src="images/CINE.webp" alt="">
                            <span class="iconfont">&#xe62c;</span>
                        </div>
                        <p class="v-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                    </li>
                    <li class="float">
                        <div class="v-img">
                            <img src="images/CINE.webp" alt="">
                            <span class="iconfont">&#xe62c;</span>
                        </div>
                        <p class="v-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                    </li>
                    <li class="float">
                        <div class="v-img">
                            <img src="images/CINE.webp" alt="">
                            <span class="iconfont">&#xe62c;</span>
                        </div>
                        <p class="v-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                    </li>
                    <li class="float right-zero">
                        <div class="v-img">
                            <img src="images/CINE.webp" alt="">
                            <span class="iconfont">&#xe62c;</span>
                        </div>
                        <p class="v-topic">Note 10 Pro</p>
                        <p class="f-synopsis">天玑1100年度旗舰芯，VC液冷散热</p>
                    </li>

                </ul>
            </div>
        </div>


    </div>
    <!--商品栏结束-->
</div>


<!--页脚开始-->
<footer>
    <div class="wrapper">
        <ul class="footer-top">
            <li>
                <span class="iconfont">&#xe614;</span>
                <span>预约维修服务</span>
            </li>
            <span class="line"></span>
            <li>
                <span class="iconfont">&#xe600;</span>
                <span>7天无理由退货</span>
            </li>
            <span class="line"></span>
            <li>
                <span class="iconfont">&#xe60c;</span>
                <span>15天免费换货</span>
            </li>
            <span class="line"></span>
            <li>
                <span class="iconfont">&#xe65a;</span>
                <span>满69包邮</span>
            </li>
            <span class="line"></span>
            <li>
                <span class="iconfont">&#xe610;</span>
                <span>520余家售后网点</span>
            </li>
        </ul>

        <div class="footer-centre">
            <dl>
                <dt>帮助中心</dt>
                <dd>账户管理</dd>
                <dd>购物指南</dd>
                <dd>订单操作</dd>
            </dl>
            <dl>
                <dt>服务支持</dt>
                <dd>售后政策</dd>
                <dd>自助服务</dd>
                <dd>相关下载</dd>
            </dl>
            <dl>
                <dt>线下门店</dt>
                <dd>小米之家</dd>
                <dd>服务网点</dd>
                <dd>授权体验店</dd>
            </dl>
            <dl>
                <dt>关于小米</dt>
                <dd>了解小米</dd>
                <dd>加入小米</dd>
                <dd>投资者关系</dd>
                <dd>企业社会责任</dd>
                <dd>廉洁举报</dd>
            </dl>
            <dl>
                <dt>关注我们</dt>
                <dd>新浪微博</dd>
                <dd>官方微信</dd>
                <dd>联系我们</dd>
                <dd>公益基金会</dd>
            </dl>
            <dl>
                <dt>特色服务</dt>
                <dd>F 码通道</dd>
                <dd>礼物码</dd>
                <dd>防伪查询</dd>
            </dl>

            <span class="c-line"></span>

            <ul class="contact-way">
                <li class="c-phone">400-100-5678</li>
                <li class="expensive">8:00-18:00（仅收市话费）</li>
                <li class="c-service">
                    <span class="iconfont">&#xe628;</span> 人工客服
                </li>
                <li class="attentive">
                    关注小米：
                    <span id="microblog" class="iconfont">&#xe627;</span>
                    <span id="WeChat" class="iconfont">&#xe7e5;</span>
                    <div id="wx-img">
                        <img src="images/wx-img.png" alt="">
                    </div>
                </li>
            </ul>
        </div>
    </div>

    <div class="footer-bottom">
        <div class="wrapper">
            <div class="footer-left">
                <img src="images/logo-mi2.png" alt="">
            </div>
            <div class="b-introduce">
                <ul class="ul-top-list">
                    <li>小米商城</li>
                    <li>MIUI</li>
                    <li>米家</li>
                    <li>米聊</li>
                    <li>多看</li>
                    <li>游戏</li>
                    <li>政企服务</li>
                    <li>小米天猫店</li>
                    <li>小米集团隐私政策</li>
                    <li>小米公司儿童信息保护规则</li>
                    <li>小米商城隐私政策</li>
                    <li>小米商城用户协议</li>
                    <li>问题反馈</li>
                    <li class="border-zero">Select Location</li>
                    <li>北京互联网法院法律服务工作站</li>
                    <li>中国消费者协会</li>
                    <li class="border-zero">北京市消费者协会</li>
                </ul>
                <ul class="ul-bottom-list">
                    <li>@mi.com</li>
                    <li>京ICP证110507号</li>
                    <li>京ICP备10046444号</li>
                    <li>京公网安备11010802020134号</li>
                    <li>京网文[2020]0276-042号</li>
                    <li>（京）网械平台备字（2018）第00005号</li>
                    <li>互联网药品信息服务资格证（京）-非经营性-2014-0090</li>
                    <li>营业执照</li>
                    <li>医疗器械质量公告</li>
                    <li>增值电信业务许可证</li>
                    <li>网络食品经营备案</li>
                    <li>京食药网食备案202010048</li>
                    <li>食品经营许可证</li>
                    <li>违法和不良信息举报电话：171-5104-4404</li>
                    <li>知识产权侵权投诉</li>
                    <li>本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</li>
                    <li><img src="images/认证.png" alt=""></li>
                    <li><img src="images/认证.png" alt=""></li>
                    <li><img src="images/认证.png" alt=""></li>
                    <li><img src="images/认证.png" alt=""></li>
                </ul>
                <div id="slogan">让全球每个人都能享受科技带来的美好生活</div>
            </div>
        </div>
    </div>
</footer>


<!--页脚结束-->


</body>
</html>